// 博客模块 Mock 数据

interface Blog {
  id: string
  title: string
  content: string
  summary?: string
  cover?: string
  status: number
  category?: string
  tags?: string
  create_time: string
  update_time: string
}

// 生成随机ID
const generateId = (): string => {
  return Date.now().toString(36) + Math.random().toString(36).substr(2)
}

// 生成随机时间
const generateTime = (daysAgo: number = 0): string => {
  const date = new Date()
  date.setDate(date.getDate() - daysAgo)
  date.setHours(Math.floor(Math.random() * 24))
  date.setMinutes(Math.floor(Math.random() * 60))
  return date.toISOString()
}

// Mock 博客数据
const mockBlogs: Blog[] = [
  {
    id: '1',
    title: 'Vue 3 组合式 API 最佳实践',
    content: `
      <h2>什么是组合式 API？</h2>
      <p>组合式 API (Composition API) 是 Vue 3 引入的新特性，它提供了一种更灵活的方式来组织组件逻辑。</p>
      
      <h3>主要优势</h3>
      <ul>
        <li><strong>更好的逻辑复用</strong>：可以将相关的逻辑组织在一起</li>
        <li><strong>更好的类型推断</strong>：TypeScript 支持更完善</li>
        <li><strong>更灵活的代码组织</strong>：不再受选项式 API 的限制</li>
      </ul>
      
      <h3>使用示例</h3>
      <pre><code>import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    
    return {
      count,
      doubleCount
    }
  }
}</code></pre>
      
      <p>通过组合式 API，我们可以更好地组织代码，提高代码的可维护性。</p>
    `,
    summary: '深入探讨 Vue 3 组合式 API 的使用方法和最佳实践，帮助你更好地组织组件逻辑。',
    cover: 'https://picsum.photos/800/400?random=1',
    status: 1,
    category: '前端开发',
    tags: 'Vue3,JavaScript,前端',
    create_time: generateTime(5),
    update_time: generateTime(2)
  },
  {
    id: '2',
    title: 'TypeScript 类型系统详解',
    content: `
      <h2>TypeScript 类型系统</h2>
      <p>TypeScript 是 JavaScript 的超集，它添加了静态类型检查功能。</p>
      
      <h3>基本类型</h3>
      <ul>
        <li><code>string</code> - 字符串类型</li>
        <li><code>number</code> - 数字类型</li>
        <li><code>boolean</code> - 布尔类型</li>
        <li><code>array</code> - 数组类型</li>
      </ul>
      
      <h3>接口和类型别名</h3>
      <pre><code>interface User {
  name: string
  age: number
}

type Status = 'active' | 'inactive'</code></pre>
      
      <p>通过类型系统，我们可以在开发阶段发现潜在的错误，提高代码质量。</p>
    `,
    summary: '全面介绍 TypeScript 的类型系统，包括基本类型、接口、泛型等核心概念。',
    cover: 'https://picsum.photos/800/400?random=2',
    status: 1,
    category: '编程语言',
    tags: 'TypeScript,编程,类型系统',
    create_time: generateTime(10),
    update_time: generateTime(8)
  },
  {
    id: '3',
    title: 'Element Plus 组件库使用指南',
    content: `
      <h2>Element Plus 简介</h2>
      <p>Element Plus 是基于 Vue 3 的组件库，提供了丰富的 UI 组件。</p>
      
      <h3>常用组件</h3>
      <ul>
        <li><strong>表单组件</strong>：el-input, el-select, el-date-picker</li>
        <li><strong>数据展示</strong>：el-table, el-pagination</li>
        <li><strong>反馈组件</strong>：el-message, el-notification</li>
      </ul>
      
      <h3>安装使用</h3>
      <pre><code>npm install element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)</code></pre>
      
      <p>Element Plus 提供了完整的组件生态，可以快速构建企业级应用。</p>
    `,
    summary: '详细介绍 Element Plus 组件库的使用方法，包括安装、配置和常用组件的使用示例。',
    cover: 'https://picsum.photos/800/400?random=3',
    status: 1,
    category: 'UI 框架',
    tags: 'Element Plus,Vue3,UI组件',
    create_time: generateTime(15),
    update_time: generateTime(12)
  },
  {
    id: '4',
    title: 'Vite 构建工具快速入门',
    content: `
      <h2>Vite 是什么？</h2>
      <p>Vite 是下一代前端构建工具，提供了极速的开发体验。</p>
      
      <h3>主要特性</h3>
      <ul>
        <li><strong>快速启动</strong>：基于 ES 模块的按需编译</li>
        <li><strong>热更新</strong>：毫秒级的热模块替换</li>
        <li><strong>开箱即用</strong>：内置 TypeScript、JSX 等支持</li>
      </ul>
      
      <h3>创建项目</h3>
      <pre><code>npm create vite@latest my-app
cd my-app
npm install
npm run dev</code></pre>
      
      <p>Vite 让前端开发变得更加高效和愉快。</p>
    `,
    summary: '快速了解 Vite 构建工具的核心概念和使用方法，提升开发效率。',
    cover: 'https://picsum.photos/800/400?random=4',
    status: 0,
    category: '构建工具',
    tags: 'Vite,构建工具,前端工程化',
    create_time: generateTime(20),
    update_time: generateTime(18)
  },
  {
    id: '5',
    title: 'Pinia 状态管理实战',
    content: `
      <h2>Pinia 简介</h2>
      <p>Pinia 是 Vue 的官方状态管理库，是 Vuex 的替代方案。</p>
      
      <h3>为什么选择 Pinia？</h3>
      <ul>
        <li>更简单的 API</li>
        <li>更好的 TypeScript 支持</li>
        <li>支持组合式 API</li>
        <li>体积更小</li>
      </ul>
      
      <h3>基本使用</h3>
      <pre><code>import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})</code></pre>
      
      <p>Pinia 提供了更现代化的状态管理方案。</p>
    `,
    summary: '学习如何使用 Pinia 进行状态管理，掌握现代 Vue 应用的状态管理最佳实践。',
    cover: 'https://picsum.photos/800/400?random=5',
    status: 1,
    category: '状态管理',
    tags: 'Pinia,Vue3,状态管理',
    create_time: generateTime(25),
    update_time: generateTime(22)
  },
  {
    id: '6',
    title: '前端性能优化技巧',
    content: `
      <h2>性能优化的重要性</h2>
      <p>前端性能直接影响用户体验，是前端开发中不可忽视的重要环节。</p>
      
      <h3>优化策略</h3>
      <ul>
        <li><strong>代码分割</strong>：按需加载，减少初始包大小</li>
        <li><strong>懒加载</strong>：延迟加载非关键资源</li>
        <li><strong>缓存策略</strong>：合理使用浏览器缓存</li>
        <li><strong>图片优化</strong>：使用合适的图片格式和尺寸</li>
      </ul>
      
      <h3>工具推荐</h3>
      <ul>
        <li>Lighthouse - 性能分析工具</li>
        <li>Webpack Bundle Analyzer - 打包分析</li>
        <li>Chrome DevTools - 性能调试</li>
      </ul>
      
      <p>通过合理的优化策略，可以显著提升应用的性能表现。</p>
    `,
    summary: '分享前端性能优化的实用技巧和工具，帮助你构建更快的 Web 应用。',
    cover: 'https://picsum.photos/800/400?random=6',
    status: 1,
    category: '性能优化',
    tags: '性能优化,前端,最佳实践',
    create_time: generateTime(30),
    update_time: generateTime(28)
  },
  {
    id: '7',
    title: 'CSS Grid 布局完全指南',
    content: `
      <h2>CSS Grid 简介</h2>
      <p>CSS Grid 是强大的二维布局系统，可以轻松创建复杂的布局。</p>
      
      <h3>基本概念</h3>
      <ul>
        <li><strong>Grid Container</strong>：网格容器</li>
        <li><strong>Grid Item</strong>：网格项</li>
        <li><strong>Grid Line</strong>：网格线</li>
        <li><strong>Grid Track</strong>：网格轨道</li>
      </ul>
      
      <h3>示例代码</h3>
      <pre><code>.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}</code></pre>
      
      <p>CSS Grid 让布局变得更加灵活和强大。</p>
    `,
    summary: '深入理解 CSS Grid 布局系统，掌握现代 CSS 布局技术。',
    cover: 'https://picsum.photos/800/400?random=7',
    status: 0,
    category: 'CSS',
    tags: 'CSS,Grid,布局',
    create_time: generateTime(35),
    update_time: generateTime(33)
  },
  {
    id: '8',
    title: 'RESTful API 设计规范',
    content: `
      <h2>RESTful API 设计原则</h2>
      <p>RESTful API 是一种设计风格，用于创建 Web 服务。</p>
      
      <h3>核心原则</h3>
      <ul>
        <li>使用 HTTP 动词（GET, POST, PUT, DELETE）</li>
        <li>使用名词表示资源</li>
        <li>使用状态码表示结果</li>
        <li>使用 JSON 格式传输数据</li>
      </ul>
      
      <h3>URL 设计示例</h3>
      <pre><code>GET    /api/users        # 获取用户列表
GET    /api/users/1      # 获取单个用户
POST   /api/users        # 创建用户
PUT    /api/users/1      # 更新用户
DELETE /api/users/1      # 删除用户</code></pre>
      
      <p>遵循 RESTful 规范可以让 API 更加清晰和易用。</p>
    `,
    summary: '学习 RESTful API 的设计规范和最佳实践，设计出优雅的 API 接口。',
    cover: 'https://picsum.photos/800/400?random=8',
    status: 1,
    category: '后端开发',
    tags: 'API,后端,RESTful',
    create_time: generateTime(40),
    update_time: generateTime(38)
  },
  {
    id: '9',
    title: 'Git 版本控制进阶技巧',
    content: `
      <h2>Git 高级技巧</h2>
      <p>掌握 Git 的高级功能，可以更高效地管理代码版本。</p>
      
      <h3>常用命令</h3>
      <ul>
        <li><code>git rebase</code> - 变基操作</li>
        <li><code>git cherry-pick</code> - 选择提交</li>
        <li><code>git stash</code> - 暂存更改</li>
        <li><code>git bisect</code> - 二分查找</li>
      </ul>
      
      <h3>工作流建议</h3>
      <ul>
        <li>使用分支进行功能开发</li>
        <li>定期提交代码</li>
        <li>编写清晰的提交信息</li>
        <li>使用 Pull Request 进行代码审查</li>
      </ul>
      
      <p>熟练使用 Git 可以大大提高开发效率。</p>
    `,
    summary: '分享 Git 版本控制的高级技巧和工作流，提升团队协作效率。',
    cover: 'https://picsum.photos/800/400?random=9',
    status: 1,
    category: '开发工具',
    tags: 'Git,版本控制,开发工具',
    create_time: generateTime(45),
    update_time: generateTime(42)
  },
  {
    id: '10',
    title: 'Docker 容器化部署实践',
    content: `
      <h2>Docker 简介</h2>
      <p>Docker 是一个开源的容器化平台，可以简化应用的部署和管理。</p>
      
      <h3>核心概念</h3>
      <ul>
        <li><strong>镜像（Image）</strong>：应用的模板</li>
        <li><strong>容器（Container）</strong>：镜像的运行实例</li>
        <li><strong>仓库（Repository）</strong>：镜像的存储位置</li>
      </ul>
      
      <h3>基本命令</h3>
      <pre><code>docker build -t my-app .
docker run -d -p 3000:3000 my-app
docker ps
docker logs container-id</code></pre>
      
      <p>使用 Docker 可以实现应用的快速部署和扩展。</p>
    `,
    summary: '学习 Docker 容器化技术，实现应用的标准化部署和运维。',
    cover: 'https://picsum.photos/800/400?random=10',
    status: 0,
    category: 'DevOps',
    tags: 'Docker,容器化,部署',
    create_time: generateTime(50),
    update_time: generateTime(48)
  }
]

// 存储博客数据（模拟数据库）
let blogStore: Blog[] = [...mockBlogs]

// 模拟延迟
const delay = (ms: number = 500) => new Promise(resolve => setTimeout(resolve, ms))

// Mock API 实现
export const blogMockApi = {
  // 获取博客列表
  async getList(params: any = {}) {
    await delay()
    
    let filteredBlogs = [...blogStore]
    
    // 搜索过滤
    if (params.title) {
      filteredBlogs = filteredBlogs.filter(blog => 
        blog.title.toLowerCase().includes(params.title.toLowerCase())
      )
    }
    
    if (params.category) {
      filteredBlogs = filteredBlogs.filter(blog => 
        blog.category?.toLowerCase().includes(params.category.toLowerCase())
      )
    }
    
    if (params.status !== undefined) {
      filteredBlogs = filteredBlogs.filter(blog => blog.status === params.status)
    }
    
    // 分页
    const page = params.page || 1
    const pageSize = params.pageSize || 10
    const start = (page - 1) * pageSize
    const end = start + pageSize
    const list = filteredBlogs.slice(start, end)
    
    return {
      code: 200,
      message: '成功',
      data: {
        list,
        total: filteredBlogs.length,
        page,
        pageSize
      }
    }
  },
  
  // 获取博客详情
  async getDetail(id: string) {
    await delay()
    
    const blog = blogStore.find(b => b.id === id)
    
    if (!blog) {
      return {
        code: 404,
        message: '博客不存在',
        data: null
      }
    }
    
    return {
      code: 200,
      message: '成功',
      data: blog
    }
  },
  
  // 创建博客
  async create(data: any) {
    await delay()
    
    const newBlog: Blog = {
      id: generateId(),
      title: data.title,
      content: data.content,
      summary: data.summary || '',
      cover: data.cover || '',
      status: data.status !== undefined ? data.status : 1,
      category: data.category || '',
      tags: data.tags || '',
      create_time: new Date().toISOString(),
      update_time: new Date().toISOString()
    }
    
    blogStore.unshift(newBlog)
    
    return {
      code: 200,
      message: '创建成功',
      data: newBlog
    }
  },
  
  // 更新博客
  async update(data: any) {
    await delay()
    
    const index = blogStore.findIndex(b => b.id === data.id)
    
    if (index === -1) {
      return {
        code: 404,
        message: '博客不存在',
        data: null
      }
    }
    
    blogStore[index] = {
      ...blogStore[index],
      ...data,
      update_time: new Date().toISOString()
    }
    
    return {
      code: 200,
      message: '更新成功',
      data: blogStore[index]
    }
  },
  
  // 删除博客
  async delete(id: string) {
    await delay()
    
    const index = blogStore.findIndex(b => b.id === id)
    
    if (index === -1) {
      return {
        code: 404,
        message: '博客不存在',
        data: null
      }
    }
    
    blogStore.splice(index, 1)
    
    return {
      code: 200,
      message: '删除成功',
      data: null
    }
  },
  
  // 发布博客
  async publish(id: string) {
    await delay()
    
    const index = blogStore.findIndex(b => b.id === id)
    
    if (index === -1) {
      return {
        code: 404,
        message: '博客不存在',
        data: null
      }
    }
    
    blogStore[index].status = 1
    blogStore[index].update_time = new Date().toISOString()
    
    return {
      code: 200,
      message: '发布成功',
      data: blogStore[index]
    }
  },
  
  // 取消发布博客
  async unpublish(id: string) {
    await delay()
    
    const index = blogStore.findIndex(b => b.id === id)
    
    if (index === -1) {
      return {
        code: 404,
        message: '博客不存在',
        data: null
      }
    }
    
    blogStore[index].status = 0
    blogStore[index].update_time = new Date().toISOString()
    
    return {
      code: 200,
      message: '已取消发布',
      data: blogStore[index]
    }
  }
}

